{% extends theme_path('base.html') %}

{% block title %}{{ current_user.username }}的个人中心{% endblock %}

{% block head %}
{{ super() }}
<!-- 确保在页面头部加载必要的脚本 -->
<script src="{{ url_for('static', filename='default/js/profile.js') }}"></script>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- 个人信息卡片 -->
        <div class="lg:col-span-4">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <div class="flex flex-col items-center">
                    <img src="{{ current_user.avatar }}" alt="avatar" 
                         class="w-24 h-24 rounded-full mb-4">
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ current_user.nickname }}</h2>
                    <p class="text-gray-500 dark:text-gray-400 mb-4">{{ current_user.email }}</p>
                    <div class="flex space-x-3">
                        <a href="{{ url_for('user.edit_profile') }}"
                           class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                            编辑资料
                        </a>
                        <a href="{{ url_for('user.my_articles') }}"
                           class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200">
                            我的文章
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 兴趣分析 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mt-6">
                <!--<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">阅读兴趣 Top 5</h3>
                {% if interests_chart %}
                <div id="interestsChart"></div>
                <script>
                    window.chartData = {{ interests_chart | safe }};
                </script>
                {% else %}
                <p class="text-gray-500 dark:text-gray-400 text-center py-8">暂无数据</p>
                {% endif %}-->
                
                <div class="mt-2">
                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">阅读情感倾向</h4>
                    <div class="flex items-center">
                        <div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full">
                            <div class="h-2 rounded-full bg-green-500 dark:bg-green-400 style="width: {{ (1 + 1) * 50 }}%">
                            </div>
                        </div>
                        <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">
                            中性
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 浏览历史 -->
        <div class="lg:col-span-8">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">浏览历史</h2>
                    {% if view_history.items %}
                    <button onclick="confirmDeleteAllHistory()" 
                            class="text-sm text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 whitespace-nowrap">
                        清空历史
                    </button>
                    {% endif %}
                </div>
                <div class="space-y-4">
                    {% for history in view_history.items %}
                        {% if history.article %}
                        <div class="border-b border-gray-100 dark:border-gray-700 pb-4 last:border-0 last:pb-0">
                            <div class="flex justify-between items-start">
                                <div class="flex-1 min-w-0 mr-4">
                                    <a href="{{ ArticleUrlGenerator.generate(history.article.id, history.article.category_id, history.article.created_at) }}" 
                                       class="text-lg font-medium text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 block truncate">
                                        {{ history.article.title }}
                                    </a>
                                    <div class="flex flex-wrap items-center mt-2 text-sm text-gray-500 dark:text-gray-400">
                                        <span class="mr-2">{{ history.viewed_at.strftime('%Y-%m-%d %H:%M') }}</span>
                                        <span class="hidden sm:inline mr-2">•</span>
                                        {% set author = get_user_info(history.article.author) %}
                                        <span class="flex-shrink-0">作者：
                                            {% if author.id %}
                                                <a href="{{ url_for('user.author', id=author.id) }}"
                                                   class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400">
                                                    {{ author.username }}
                                                </a>
                                            {% else %}
                                                <span class="text-gray-500">{{ author.username }}</span>
                                            {% endif %}
                                        </span>
                                    </div>
                                </div>
                                <button onclick="confirmDeleteHistory({{ history.id }})" 
                                        class="text-sm text-gray-400 hover:text-red-600 dark:hover:text-red-400 flex-shrink-0">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        {% endif %}
                    {% else %}
                    <p class="text-gray-500 dark:text-gray-400 text-center py-8">暂无浏览历史</p>
                    {% endfor %}
                </div>
                
                {% if view_history.pages > 1 %}
                <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
                    {% with endpoint='user.profile', kwargs={} %}
                    {% include 'components/pagination.html' %}
                    {% endwith %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %} 